<template>
  <div class="tag-stats-chart tag-stats-info">
    <tag-content-header>
      <template #title>
        <span>标签数据详情</span>
      </template>
      <template #tools>
        <span class="stats-title">统计时间</span>
        <el-date-picker type="date" v-model="info.snapshotDate" value-format="yyyy-MM-dd"></el-date-picker>
        <!-- <span class="stats-title">客户范围</span>
        <el-select v-model="info.orgId" filterable>
          <el-option
            v-for="item in orgs"
            :key="item.compOrgCode"
            :label="item.compNm"
            :value="item.compOrgCode"
          ></el-option>
        </el-select> -->
      </template>
    </tag-content-header>
    <el-row>
      <template v-if="list.length">
        <el-col :span="12">
          <div id="tag-stats-info" class="tag-stats-chart stats-info-chart"></div>
        </el-col>
        <el-col :span="12">
          <tag-table ref="table" :data="dataList" :loading="loading" :columns="columns" :pagination="false">
            <template #codeDesc="{scope}">
              {{ scope.row.codeCd + '/' + scope.row.codeDesc }}
            </template>
            <template #custCoverage="{scope}">
              {{ scope.row.custCoverage * 100 }}%
            </template>
          </tag-table>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPageNum"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next, jumper"
            :total="list.length"
          >
          </el-pagination>
        </el-col>
      </template>
      <div class="tag-stats-chart" v-else>
        <div class="no-record">
          <img src="~@/assets/img/no_records.png" alt="" /><br />
          暂无数据
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    assetId: {
      type: String,
      required: true,
      default: ''
    },
    orgs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      list: [],
      dataList: [],
      columns: [
        {
          show: true,
          label: '取值/区间',
          prop: 'codeDesc',
          align: 'center'
        },
        {
          show: true,
          label: '客户数',
          prop: 'codeCount',
          align: 'center'
        },
        {
          show: true,
          label: '百分比',
          prop: 'custCoverage',
          align: 'center'
        }
      ],
      currentPageNum: 1,
      pageSize: 5,
      info: {
        snapshotDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate() - 1),
        orgId: 0
      }
    }
  },
  watch: {
    info: {
      handler() {
        this.getDetail()
      },
      deep: true
    }
  },
  methods: {
    getDetail() {
      if (this.loading) return
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/getMonDetail'),
        method: 'get',
        params: this.$ajax.setParams({
          // orgId: this.info.orgId,
          orgId: 999,
          snapshotDate: this.info.snapshotDate,
          tagId: this.assetId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = data.data
          this.currentPageNum = 1
          this.$nextTick(() => {
            if (this.list.length) {
              this.refreshData()
              this.setChart(data.data)
            } else this.chart = null
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.currentPageNum = val
      this.refreshData()
    },
    refreshData() {
      this.dataList = this.list.slice(
        this.pageSize * (this.currentPageNum - 1),
        this.pageSize * (this.currentPageNum - 1) + this.pageSize
      )
      this.$nextTick(() => this.$refs.table.$refs.tagTable.doLayout())
    },
    setChart() {
      if (!this.chart) this.chart = echarts.init(document.getElementById('tag-stats-info'))
      let pieData = []
      this.list.forEach(item => {
        pieData.push({
          name: item.codeDesc || item.codeCd,
          value: item.codeCount
        })
      })
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>数值：{c}<br/>占比：{d}%'
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            data: pieData,
            label: {
              normal: {
                position: pieData.length >= 30 ? 'inner' : 'outter',
                color: '#666'
              }
            },
            labelLine: {
              lineStyle: {
                color: '#666'
              }
            },
            itemStyle: {
              color(params) {
                let colorList = ['#0f80ff', '#11ce98', '#f79e2a', '#7886c5', '#e8d318', '#4dad30', '#f3b177']
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return params.dataIndex > colorList.length - 1
                  ? 'rgb(' + r + ',' + g + ',' + b + ')'
                  : colorList[params.dataIndex]
              }
            }
          }
        ]
      }
      this.chart.setOption(option, true)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    },
    reset() {
      this.info.snapshotDate =
        new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate() - 1)
      // this.info.orgId = this.orgs[0].compOrgCode
      this.getDetail()
    }
  }
}
</script>

<style lang="scss">
.tag-stats-info {
  .el-row,
  .el-col {
    height: 100%;
  }
  .stats-info-chart {
    height: 100%;
  }
  .tag-table {
    margin: 20px 50px;
  }
  .no-record {
    font-size: 20px;
    margin-top: 50px;
    text-align: center;
    img {
      margin-bottom: 10px;
    }
  }
  .el-pagination {
    text-align: right;
    margin-right: 40px;
  }
}
</style>
